{include file='fcworker/fc_head'}
<style type="text/css">
    .td-img{
        width: 25px;
        height: 25px;
        border-radius: 25px;
    }
    .ac-notice{
        width: 85%;
        margin: 8px auto;
        padding: 8px;
        line-height: 20px;
        text-align: center;
        display: block;
        font-size: 13px;
        box-shadow: 0 0  5px 5px rgba(0, 0, 0, 0.06);
        border-radius: 8px;
		background: rgba(255,255,255, 1);
    }
    .picker-form{
        display: inline;
        width: 50%;
    }
    .setTitle{
        position: fixed;
        left: 0.2rem;
        top: 0;
        z-index: 2;
        overflow: hidden;
        line-height: 1.37rem;
        height: 1.37rem;
        background-size: 100% 1.37rem;

    }
    .h167{
        height: 1.67rem;
    }
    .new_tr{
        height: 0.8rem !important;
        line-height: 0.8rem !important;
    }
	.tabTit{
		/*position: fixed;*/
		/*top: 1.9rem;*/
		width: 100%;
		background: #fff;
	}
	.fixed_t_w{
		position: fixed;
		top: 2.58rem;
		width: 100%;
		bottom: 0;
		overflow-y: scroll;
	}
	.fixed_t_w th{
		position: sticky;
		top:0;
	}
	.tabTit{
		/*padding-bottom: 1rem;*/
	}
	.tabTit:after{
		margin-top: 0;
		top: 0.19rem;
	}
	.tabTit span.group__notice{
		margin-left: 5px;
	}
	.tabTit span.group__notice svg{
		width: 1em;
		height: 1em;
	}
	.setTitle {
		position: relative;
		margin: .2rem 0 0;
	}
	.activeTab table{
		table-layout: fixed;
	}
	.fixedTable {
		display: none;
		position: fixed;
		top:0;
		left: 0;
		z-index: 3;
		table-layout: fixed;
	}
	/*.fixedTable table {*/
	/*	table-layout: fixed;*/
	/*}*/
	.fixedTable th {
		background: #edf6ff;
		line-height: .7rem;
		font-size: .22rem;
		color: #7e7578;
	}
	.group_overlay{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		display: none;
	}
</style>
<body style="background:#f8f8f8">
<div id="mescroll" class="mescroll">
	<div id="app">
		<a href="/{php echo createMobileUrl('x_index',array('themeid'=>$themeid));}" class="homeTag"><img src="{$_G['URL']['FCWORK_CSS']}images/homeBtn.png"></a>
		<div class="setTitle">
			<a href="javascript:history.back(-1)"></a>
			{if $ranktuan }团长排名 {/if}
			{if $rankfans }粉丝排名 {/if}
		</div>
		<!--<div class="h167"></div>-->
		<table cellpadding="0" cellspacing="0" width="100%" class="fixedTable">
			{if $ranktuan}
			<thead>
			<tr>
				<th>排名</th>
				<th>头像</th>
				<th>姓名</th>
				<th>团号</th>
				<th>团人数</th>
				<th>操作</th>
			</tr>
			</thead>
			{/if}
			{if $rankfans}
			<thead>
			<tr>
				<th>排名</th>
				<th>头像</th>
				<th>昵称</th>
				<th><span data-id="3">浏览量</span></th>
				<th><span data-id="2">转发量</span></th>
				<th><span data-id="0">成交数</span></th>
				<th><span data-id="1">推荐数</span></th>
			</tr>
			</thead>
			{/if}
		</table>
		{if $ranktuan}
		<div class="activeBox">
			<div class="tabTit">团长排名 <span class="group__notice"><svg t="1651829338548" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1273" width="200" height="200"><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 768.353c-26.496 0-48-21.505-48-48 0-26.497 21.504-48.001 48-48.001s48 21.504 48 48-21.504 48-48 48z m88.576-327.168c-27.84 27.808-56.575 56.544-56.575 82.368v54.112c0 17.665-14.336 32.001-32.001 32.001s-32-14.336-32-32v-54.113c0-52.353 39.999-92.352 75.327-127.648 25.887-25.887 52.672-52.64 52.672-73.984 0-53.343-43.072-96.735-95.999-96.735-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.337-32-32c0-87.424 71.774-158.559 160-158.559s160 72.095 160 160.735c0 47.87-36.32 84.16-71.424 119.264z" p-id="1274" fill="#cdcdcd"></path></svg></span>
			</div>
			<div class="activeTab">
				<table cellpadding="0" cellspacing="0" width="100%" id="tuan_list">
					<thead>
					<tr>
						<th>排名</th>
						<th>头像</th>
						<th>姓名</th>
						<th>团号</th>
						<th>团人数</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					{loop $ranktuan $key $item}
					<tr class="new_tr">
						<td>{php echo ($key+1);}</td>
						<td><img src="{$item['avatar']}" class="td-img"></td>
						<td>{$item['username']}</td>
						<td>{$item['idnew']}</td>
						<td> <a href="{php echo '/'.createMobileUrl("X_group",array("themeid"=>$themeid));}&id={$item['pid']}"><span style="color: #a7a7a7;">{$item['tuannum']}</span></a></td>
						<td> <a href="{php echo '/'.createMobileUrl("X_group",array("themeid"=>$themeid));}&id={$item['pid']}"><span style="color: #a7a7a7;">明细</span></a></td>
					</tr>
					{/loop}
					</tbody>
				</table>
			</div>
		</div>
		{/if}
		{if $rankfans}
		<div class="activeBox">
			<div class="tabTit">排名方式：
				<form  class="picker-form" >
					<select name="paixu" onchange="submitForm();" id="select-pick">
						{loop $sortlist  $key $item}
						<option value="{$key}" {if $paixu == $key }selected="selected"{/if}>{$item}</option>
						{/loop}
					</select>
				</form>
				<span class="group__notice"><svg t="1651829338548" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1273" width="200" height="200"><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 768.353c-26.496 0-48-21.505-48-48 0-26.497 21.504-48.001 48-48.001s48 21.504 48 48-21.504 48-48 48z m88.576-327.168c-27.84 27.808-56.575 56.544-56.575 82.368v54.112c0 17.665-14.336 32.001-32.001 32.001s-32-14.336-32-32v-54.113c0-52.353 39.999-92.352 75.327-127.648 25.887-25.887 52.672-52.64 52.672-73.984 0-53.343-43.072-96.735-95.999-96.735-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.337-32-32c0-87.424 71.774-158.559 160-158.559s160 72.095 160 160.735c0 47.87-36.32 84.16-71.424 119.264z" p-id="1274" fill="#cdcdcd"></path></svg></span>
			</div>
			<div class="activeTab">
				<table cellpadding="0" cellspacing="0" width="100%" id="fans_list">
					<thead>
					<tr>
						<th>排名</th>
						<th>头像</th>
						<th>昵称</th>
						<th><span data-id="3">浏览量</span></th>
						<th><span data-id="2">转发量</span></th>
						<th><span data-id="0">成交数</span></th>
						<th><span data-id="1">推荐数</span></th>
					</tr>
					</thead>
					<tbody>
					{loop $rankfans $key $item}
					<tr class="new_tr">
						<td>{php echo ($key+1);}</td>
						<td><img src="{php echo $item['avatar']?$item['avatar']:'https://css2020.yixuan.net/2020css/yx2020/images/question.png';}" class="td-img"></td>
						<td>{$item['name']}</td>
						<td>{$item['scansum']}</td>
						<td>{$item['forward']}</td>
						<td><span>{$item['tuijian']}</span></td>
						<td>{$item['responsum']}</td>
					</tr>
					{/loop}
					</tbody>
				</table>
			</div>
		</div>
		{/if}
		<div class="group_overlay">
			{if $ranktuan}
			<div class="ac-notice">
				<div style="color: #4490e2">注:点击团号可查看该团成员明细</div>
				<div style="color: #ccc;">团长排名与粉丝推荐成交排名区别:团长排名是根据当前团的成员数来计算,不一定每一个团员都为团长推荐,有可能为团员拉的新团员;粉丝推荐成交排名是根据客户付款时打开谁的链接,记录给谁,根据推荐成功数进行排名</div>
			</div>
			{/if}
			{if $rankfans}
			<div class="ac-notice">
				<div style="color: #4490e2">注:点击成交人数可查看该粉丝的推荐成交明细</div>
				<div style="color: #ccc">注:点击标题可按关键字排名</div>
				<div style="color: #ccc;">团长排名与粉丝推荐成交排名区别:团长排名是根据当前团的成员数来计算,不一定每一个团员都为团长推荐,有可能为团员拉的新团员;粉丝推荐成交排名是根据客户付款时打开谁的链接,记录给谁,根据推荐成功数进行排名</div>
			</div>
			{/if}
		</div>
		<div class="h110"></div>
		<input type="hidden" name="page" id="page" value="{$page}">
		<input type="hidden" name="hasNext" id="hasNext" value="{$hasNext}">
		<input type="hidden" name="op" id="op" value="{$op}">
		<input type="hidden" name="paixu" id="paixu" value="{$paixu}">
	</div>
</div>

</body>
<!--  下拉刷新-->
<script>
	const mescroll = new MeScroll("mescroll", {
		down: {
			auto: false,
			callback: () => {
				mescroll.endSuccess();
				setTimeout(() => {
					window.location.reload();
				},500)
			}
		},
		up: {
			use: false
		}
	})
</script>
<script>
    $('.choseBar2 span').click(function(){
        $(this).addClass('on').siblings().removeClass('on');
    })
    $('.moreChose span').click(function(){
        if($(this).hasClass('on')){
            $(this).removeClass('on')
        }else{
            $(this).addClass('on')
        }
    })
    function submitForm() {
        var options = $("#select-pick option:selected");
        var val = options.val();
        if (val>=0){
            var jump_url = "/{php echo createMobileUrl('X_ranktuan',array('themeid'=>$themeid,'op'=>'rankfans'));}" + '&paixu='+val;
            self.location.href = jump_url;
        }
    }
	const headerTop = $('.activeTab table thead').offset().top;
	let fixed_table_header = false;
	// console.log(headerTop);
    var loadingState= false;
    var hasNext = 1;
	$('#mescroll').scroll(function () {
		hasNext = $("#hasNext").val();
		let height = $('#app').height();
		let scrollTop = $(this).scrollTop();
		const direction = getScrollDirection(scrollTop);
		if(direction && scrollTop >= headerTop && !fixed_table_header ) {
			fixed_table_header = true;
			$('.fixedTable').show();
			$('.activeTab table').addClass('table__fixed');
		}
		if(!direction && scrollTop <= headerTop && fixed_table_header) {
			fixed_table_header = false;
			$('.fixedTable').hide();
			$('.activeTab table').removeClass('table__fixed');
		}
		// 加载数据
		if(Math.ceil(scrollTop) + $(window).height() >= height) {
			// alert('到底了');
			if (!loadingState && hasNext==1){
				var page = $("#page").val();
				var op = $("#op").val();
				var paixu = $("#paixu").val();
				var next_page = +page+1;
				loadingState = true;
				layer.msg('加载中', {
					icon: 16
					,shade: 0.01
				});
				var postUrl="/{php echo createMobileUrl('X_ranktuan',array('themeid'=>$themeid));}";
				$.ajax({
					url:postUrl,
					dataType:'json',
					method:'post',
					data: {page:next_page,id:0,op:op,paixu:paixu},
					success:function (e) {
						let data = e.data;
						let error = e.error;
						let msg = e.msg;
						if (error!=0){
							layer.msg(msg);
						}else{
							if (data.ranktuan){
								$("#tuan_list").append(data.ranktuan);
							}
							if (data.rankfans){
								$("#fans_list").append(data.rankfans);
							}

							layer.closeAll();
						}
						loadingState = false;
						if (data.hasNext){
							hasNext = 1;
						}else{
							hasNext = 0;
						}
						$("#hasNext").val(hasNext);
						$("#page").val(next_page);
					},
					fail:function (err) {
						console.log(err)
					}
				});
			}
		}

	})
	let oldScrollTop = 0;
	function getScrollDirection(scrollTop) {
		const direction = oldScrollTop >= scrollTop ? 0: 1; //0: up || 1: down
		oldScrollTop = scrollTop;
		return direction
	}
	$('.group__notice').click(function () {
		$('.group_overlay').css('display','flex');
		$('body').css('overflow', 'hidden')
	})
	$('.group_overlay').click(function(e){
		if(e.target.contains($('.ac-notice')[0])) {
			$(this).css('display', 'none');
			$('body').css('overflow', '')
		}
	})
    $(".fixed_t_w").scroll(function(){
        hasNext = $("#hasNext").val();
        var height = $(".fixed_t_w").height();
        var scrollSpace = $(".fixed_t_w").scrollTop();

        if (scrollSpace > $(".fixed_t_w table").height() - height){
            if (!loadingState && hasNext==1){
                var page = $("#page").val();
                var op = $("#op").val();
                var paixu = $("#paixu").val();
                var next_page = +page+1;
                loadingState = true;
                $("#page").val(next_page);
                layer.msg('加载中', {
                    icon: 16
                    ,shade: 0.01
                });
                var postUrl="/{php echo createMobileUrl('X_ranktuan',array('themeid'=>$themeid));}";
                $.ajax({
                    url:postUrl,
                    dataType:'json',
                    method:'post',
                    data: {page:next_page,id:0,op:op,paixu:paixu},
                    success:function (e) {
                        let data = e.data;
                        let error = e.error;
                        let msg = e.msg;
                        if (error!=0){
                            layer.msg(msg);
                        }else{
                            if (data.ranktuan){
                                $("#tuan_list").append(data.ranktuan);
                            }
                            if (data.rankfans){
                                $("#fans_list").append(data.rankfans);
                            }
                            layer.closeAll();
                        }
                        loadingState = false;
                        if (data.hasNext){
                            hasNext = 1;
                        }else{
                            hasNext = 0;
                        }
                        $("#hasNext").val(hasNext);
                    },
                    fail:function (err) {
                        console.log(err)
                    }
                });
            }
        }
    })

</script>
{include file='fcworker/fc_base_foot'}
</html>